<template>
    <div>
         <!-- 最新音乐 -->
          <div class="newestBox">
            <h3><span class="newestspan">|</span> 最新音乐</h3>
            <ul class="newestList" v-for="(item,index) in newestList" :key="index">
              <li @click="goPlay(item.id)">
                <div class="newestLeft">
                    <div class="spanTitleBox"><span class="spanTitle">{{item.name}}</span></div>
                  <span class="spanAuthor">隔壁老范-张靓颖-韩红-李玉刚</span>
                </div>
                <div class="newestRight">
                  <van-icon name="play-circle-o" size="28" color="#999" />
                </div>
              </li>
             
            </ul>
          </div>
    </div>
</template>
<script>
import { newest } from '../api/api'

export default {
    name:"newest",
    data(){
        return{
            newestList:"",
        }
    },
    created(){
        newest().then(res=>{
            console.log(res);
            this.newestList=res.result
        })
    },
    methods:{
      goPlay(id){
        this.$router.push({path:"/mp3", query: {id}});
      }
      // this.$router.push({
      //   path: "/songDetails",
      //   query: { id },
      // });
    }
}
</script>
<style scoped lang="less">

// 最新音乐

.newestBox {
  width: 100%;
  overflow: hidden;
}
.newestspan {
  color: red;
  font-weight: 800;
}
.newestList {
  width: 100%;
  margin: auto;
  overflow: hidden;
}
.newestList > li {
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 94%;
  height: 42px;
  // line-height: 60px;
  border-bottom: 1px solid #ddd;
  padding: 6px 1px;
}

.footerBox {
  width: 100%;
  height: 200px;
}
.spanTitle {
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spanTitleBox {
    width: 300px;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spanAuthor {
  display: block;
  font-size: 12px;
  color: #999;
}
.newestLeft {
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newestLeft > span > :first-child {
  font-size: 28px;
  color: red;
}
.newestRight {
  float: right;
  position: absolute;
  top: 28%;
  right: 5px;
  width: 28px;
  height: 28px;
  // background-color: aqua;
}
</style>

